<template>
    <div class="data-resource">
        <section class="clear">
            <div class="common-census fl">
                <div class="c-title">
                    <span>资源统计</span>
                </div>
                <div class="census bgc1">
                    <ul class="clear">
                        <li>
                            <span class="app-sum">{{
                                resourceCountData.total_num
                            }}</span>
                            <span class="app-name">总资源数</span>
                        </li>
                        <li>
                            <span class="app-sum">{{
                                resourceCountData.resource_num
                            }}</span>
                            <span class="app-name">学科资源</span>
                        </li>
                        <li>
                            <span class="app-sum">{{
                                resourceCountData.video_num
                            }}</span>
                            <span class="app-name">视频资源</span>
                        </li>
                        <li>
                            <span class="app-sum">{{
                                resourceCountData.test_num
                            }}</span>
                            <span class="app-name">试卷试题</span>
                        </li>
                    </ul>
                </div>
                <div class="c-title">
                    <span>资源占比</span>
                </div>
                <div class="ratio circle bgc1">
                    <div class="circle-l">
                        <div class="container">
                            <div class="data">
                                <el-progress
                                    type="circle"
                                    color="#08DBFF"
                                    :stroke-width="12"
                                    :percentage="
                                        Math.round(
                                            resourceCountData.primary_percent
                                        )
                                    "
                                ></el-progress>
                            </div>
                            <div class="title">
                                <p>小学</p>
                                <p>{{ resourceCountData.primary_num }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="circle-l">
                        <div class="container">
                            <div class="data">
                                <el-progress
                                    type="circle"
                                    color="#08DBFF"
                                    :stroke-width="12"
                                    :percentage="
                                        Math.round(
                                            resourceCountData.junior_percent
                                        )
                                    "
                                ></el-progress>
                            </div>
                            <div class="title">
                                <p>初中</p>
                                <p>{{ resourceCountData.junior_num }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="circle-l">
                        <div class="container">
                            <div class="data">
                                <el-progress
                                    type="circle"
                                    color="#08DBFF"
                                    :stroke-width="12"
                                    :percentage="
                                        Math.round(
                                            resourceCountData.senior_percent
                                        )
                                    "
                                ></el-progress>
                            </div>
                            <div class="title">
                                <p>高中</p>
                                <p>{{ resourceCountData.senior_num }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="circle-l">
                        <div class="container">
                            <div class="data">
                                <el-progress
                                    type="circle"
                                    color="#08DBFF"
                                    :stroke-width="12"
                                    :percentage="
                                        Math.round(
                                            resourceCountData.university_percent
                                        )
                                    "
                                ></el-progress>
                            </div>
                            <div class="title">
                                <p>大学</p>
                                <p>{{ resourceCountData.university_num }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="download-count fl">
                <div class="c-title">
                    <span>资源下载量</span>
                    <template>
                        <el-select
                            class="fr"
                            v-model="downloadDayVal"
                            placeholder="选择时间"
                        >
                            <el-option
                                v-for="item in downloadDays"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </template>
                </div>
                <div class="download-map bgc1">
                    <lineChart
                        v-if="downloadChartFlag == true"
                        id="download-chart"
                        style="width: 100%;height:100%;"
                        :chartData.sync="downloadData"
                    ></lineChart>
                    <div v-else class="no-data-tips">- 暂无数据 -</div>
                </div>
            </div>
        </section>
        <section class="clear">
            <div class="upload-count fl">
                <div class="c-title">
                    <span>资源上传量</span>
                    <template>
                        <el-select
                            class="fr"
                            v-model="uploadDayVal"
                            placeholder="选择时间"
                        >
                            <el-option
                                v-for="item in uploadDays"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </template>
                </div>
                <div class="upload-map bgc1">
                    <lineChart
                        v-if="uploadChartFlag == true"
                        id="upload-chart"
                        style="width: 100%;height:100%;"
                        :chartData.sync="uploadData"
                    ></lineChart>
                    <div v-else class="no-data-tips">- 暂无数据 -</div>
                </div>
            </div>
            <div class="other-resource fl">
                <div class="c-title">
                    <span>其他</span>
                </div>
                <div class="resource-scale sampling bgc1">
                    <ul>
                        <li>
                            <p class="clear">
                                <span class="percent-name fl">教师</span>
                                <span class="percentage fr"
                                    >{{
                                        Math.round(
                                            otherResourceData.teacher_percent
                                        )
                                    }}%</span
                                >
                            </p>
                            <el-progress
                                :show-text="false"
                                :stroke-width="24"
                                :percentage="otherResourceData.teacher_percent"
                            ></el-progress>
                        </li>
                        <li>
                            <p class="clear">
                                <span class="percent-name fl">其他角色</span>
                                <span class="percentage fr"
                                    >{{
                                        Math.round(
                                            otherResourceData.other_percent
                                        )
                                    }}%</span
                                >
                            </p>
                            <el-progress
                                :show-text="false"
                                :stroke-width="24"
                                :percentage="otherResourceData.other_percent"
                            ></el-progress>
                        </li>
                    </ul>
                    <div class="tips">
                        <p>上方数据为上传资源角色比例</p>
                        <p>
                            数据取自
                            {{ getDateDiff(otherResourceData.update_time) }}
                        </p>
                    </div>
                </div>
                <div class="c-title">
                    <span>最新上传资源</span>
                </div>
                <div class="latest-upload bgc1">
                    <div
                        class="resource-carousel"
                        v-if="
                            newResourceData !== undefined &&
                                newResourceData.length > 0
                        "
                    >
                        <template>
                            <el-carousel
                                height="120px"
                                direction="vertical"
                                indicator-position="none"
                            >
                                <el-carousel-item
                                    v-for="(item, index) in newResourceData"
                                    :key="index"
                                >
                                    <div class="carousel-item">
                                        <div class="box clear">
                                            <img
                                                v-if="item.file_type"
                                                :src="
                                                    filePathData[
                                                        Number(item.file_type) -
                                                            1
                                                    ]
                                                "
                                                :alt="
                                                    fileAltData[
                                                        Number(item.file_type) -
                                                            1
                                                    ]
                                                "
                                            />
                                            <div class="info">
                                                <p class="title1" :title="item.name">
                                                    {{ item.name }}
                                                </p>
                                                <p class="title2">
                                                    {{ item.grade_name }}
                                                    <i
                                                        v-if="
                                                            item.subject_name !=
                                                                ''
                                                        "
                                                        >_{{
                                                            item.subject_name
                                                        }}</i
                                                    >
                                                </p>
                                            </div>
                                        </div>
                                        <p class="time-box clear">
                                            <span class="fl">{{
                                                getDateDiff(item.create_time)
                                            }}</span>
                                            <span class="fr" :title="item.create_name"
                                                >上传者：{{
                                                    item.create_name
                                                }}</span
                                            >
                                        </p>
                                    </div>
                                </el-carousel-item>
                            </el-carousel>
                        </template>
                    </div>
                    <div v-else class="no-data-tips">- 暂无数据 -</div>
                </div>
            </div>
            <div class="top-upload fl">
                <div class="c-title">
                    <span>上传TOP榜</span>
                </div>
                <div class="upload-list top-list bgc1">
                    <ul
                        v-if="
                            topUploadData !== undefined &&
                                topUploadData.length > 0
                        "
                    >
                        <template v-for="(item, index) of topUploadData">
                            <li v-if="index < 5" :key="index">
                                <img
                                    :src="BASE_URL + item.avatar_path"
                                    alt="头像"
                                />
                                <div class="info">
                                    <p class="title1" :title="item.user_name">{{ item.user_name }}</p>
                                    <p class="title2">
                                        上传数：{{ item.upload_num }}
                                    </p>
                                </div>
                            </li>
                        </template>
                    </ul>
                    <div v-else class="no-data-tips">- 暂无数据 -</div>
                </div>
            </div>
        </section>
    </div>
</template>
<script>
// 引入公用折线图组件
import lineChart from "../Charts/lineChart";
// 引用大数据js里面的2个公用函数
import {
    getPassData,
    changeSimpleDate
} from "../../../assets/js/charts/chartsTool.js";
//折线图默认数据:
const defaultChartData = {
    yAxisName: "", //鼠标hover显示框中显示y轴的名称
    timeTitle: "", //日期区间标题
    dateData: [], //日期数组
    countData: [] //访问量数组
};
export default {
    components: {
        lineChart
    },
    props: ["platformId"], //上级页面传来的平台id
    data() {
        return {
            //资源统计数据
            resourceCountData: {
                junior_percent: 0,
                primary_percent: 0,
                senior_percent: 0,
                university_percent: 0,
                resource_num: 0,
                test_num: 0,
                total_num: 0,
                video_num: 0
            },
            //其他资源数据
            otherResourceData: {
                other_num: 0,
                other_percent: 0,
                teacher_num: 0,
                teacher_percent: 0,
                update_time: ""
            },

            // 资源下载量部分：
            downloadChartFlag: false, //默认不显示活跃用户图表
            downloadData: Object.assign({}, deep_clone(defaultChartData)),
            downloadDays: [
                {
                    value: "2",
                    label: "近3天"
                },
                {
                    value: "6",
                    label: "近7天"
                },
                {
                    value: "29",
                    label: "近30天"
                }
            ],
            downloadDayVal: "29", //默认选中三十天
            // 资源上传量部分：
            uploadChartFlag: false, //默认不显示活跃用户图表
            uploadData: Object.assign({}, deep_clone(defaultChartData)),
            uploadDays: [
                {
                    value: "2",
                    label: "近3天"
                },
                {
                    value: "6",
                    label: "近7天"
                },
                {
                    value: "29",
                    label: "近30天"
                }
            ],
            uploadDayVal: "29", //默认选中三十天
            newResourceData: [], //  最新上传资源
            filePathData: [
                //不同类型资源的图标路径
                require("../../../../public/images/format/resourceicon1.png"),
                require("../../../../public/images/format/resourceicon2.png"),
                require("../../../../public/images/format/resourceicon3.png"),
                require("../../../../public/images/format/resourceicon4.png"),
                require("../../../../public/images/format/resourceicon5.png"),
                require("../../../../public/images/format/resourceicon6.png"),
                require("../../../../public/images/format/resourceicon7.png"),
                require("../../../../public/images/format/resourceicon8.png")
            ],
            fileAltData: [
                "文档",
                "日志",
                "图片",
                "压缩文件",
                "音乐",
                "视频",
                "应用程序",
                "其他"
            ], //不同类型资源的描述
            topUploadData: [] //  上传top榜
        };
    },
    created() {},
    mounted() {},
    watch: {
        //上级页面传来的平台id值
        platformId: {
            handler(a, b) {
                if (a != "") {
                    this.getOtherResource();
                    this.getResourceCount();
                    this.getDownLoadData();
                    this.getUpLoadData();
                    this.getNewResource();
                    this.getTopUpload();
                }
            },
            immediate: true
        },
        //下载量  下拉框选查看不同的天数
        downloadDayVal(a, b) {
            if (a != b) {
                this.getDownLoadData();
            }
        },
        //上传量  下拉框选查看不同的天数
        uploadDayVal(a, b) {
            if (a != b) {
                this.getUpLoadData();
            }
        }
    },
    methods: {
        //获取资源统计数据
        getResourceCount() {
            let success = res => {
                if (!is_empty(res.data)) {
                    this.resourceCountData = res.data;
                }
            };
            this.$ajax({
                url: "api/bigdata/resource_rescount",
                method: "get",
                params: {
                    platform_id: this.platformId
                },
                func: { success: success }
            });
        },
        //获取下载量数据
        getDownLoadData() {
            //先把原有的图表数据清理：
            this.downloadChartFlag = false;
            this.downloadData = Object.assign({}, deep_clone(defaultChartData));
            let success = res => {
                if (!is_empty(res.data)) {
                    this.downloadData.yAxisName = "下载量";
                    this.downloadData.timeTitle =
                        getPassData(this.downloadDayVal, "/") +
                        "-" +
                        getPassData(0, "/"); //最近7天日期字符串
                    let dataArr = res.data.data;
                    for (let inx in dataArr) {
                        this.downloadData.dateData.push(
                            changeSimpleDate(dataArr[inx].key)
                        ); //日期数组，用于图表横坐标
                        this.downloadData.countData.push(
                            dataArr[inx].time_value
                        ); //下载量数组，用于图表纵坐标
                    }
                    this.downloadChartFlag = true; //显示图表
                }
            };
            this.$ajax({
                url: "api/bigdata/resource_downloaddata",
                method: "get",
                params: {
                    start_time: getPassData(this.downloadDayVal, "-"),
                    end_time: getPassData(0, "-"),
                    page: 1,
                    platform_id: this.platformId
                },
                func: { success: success }
            });
        },
        // 获取上传量数据
        getUpLoadData() {
            //先把原有的图表数据清理：
            this.uploadChartFlag = false;
            this.uploadData = Object.assign({}, deep_clone(defaultChartData));
            let success = res => {
                if (!is_empty(res.data)) {
                    this.uploadData.yAxisName = "上传量";
                    this.uploadData.timeTitle =
                        getPassData(this.uploadDayVal, "/") +
                        "-" +
                        getPassData(0, "/"); //最近7天日期字符串
                    let dataArr = res.data.data;
                    for (let inx in dataArr) {
                        this.uploadData.dateData.push(
                            changeSimpleDate(dataArr[inx].key)
                        ); //日期数组，用于图表横坐标
                        this.uploadData.countData.push(dataArr[inx].time_value); //长传量数组，用于图表纵坐标
                    }
                    this.uploadChartFlag = true; //显示图表
                }
            };
            this.$ajax({
                url: "api/bigdata/resource_uploaddata",
                method: "get",
                params: {
                    start_time: getPassData(this.uploadDayVal, "-"),
                    end_time: getPassData(0, "-"),
                    page: 1,
                    platform_id: this.platformId
                },
                func: { success: success }
            });
        },
        //获取其他资源数据
        getOtherResource() {
            let success = res => {
                if (!is_empty(res.data)) {
                    this.otherResourceData = res.data;
                }
            };
            this.$ajax({
                url: "api/bigdata/resource_teachercount",
                method: "get",
                params: {
                    platform_id: this.platformId
                },
                func: { success: success }
            });
        },
        //获取最新上传资源数据
        getNewResource() {
            let success = res => {
                if (!is_empty(res.data)) {
                    this.newResourceData = res.data;
                }
            };
            this.$ajax({
                url: "api/bigdata/resource_latestupdatedata",
                method: "get",
                params: {
                    platform_id: this.platformId
                },
                func: { success: success }
            });
        },
        //获取上传top榜
        getTopUpload() {
            let success = res => {
                if (!is_empty(res.data)) {
                    this.topUploadData = res.data;
                }
            };
            this.$ajax({
                url: "api/bigdata/resource_topdata",
                method: "get",
                params: {
                    platform_id: this.platformId
                },
                func: { success: success }
            });
        }
    }
};
</script>
